<template>
  <div>
    <img alt="Vue logo" src="../assets/logo.png">
    <h1>Upload Verilog File</h1>
    <form @submit.prevent="handleSubmit" enctype="multipart/form-data">
      <input type="file" ref="fileInput" accept=".v" @change="handleFileChange">
      <button type="submit">Upload</button>
    </form>
    <el-button @click="handleData">数据流</el-button>
    <p v-if="fileName">Selected file: {{ fileName }}</p>
    <pre>{{ ast }}</pre>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
      fileName: '',
      ast: ''
    };
  },
  methods: {
    // 当文件选择变化时更新文件信息
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        this.file = file;
        this.fileName = file.name;  // 显示文件名
      }
    },

    // 处理表单提交
    async handleSubmit() {
      if (!this.file) {
        alert("Please select a file.");
        return;
      }

      const formData = new FormData();
      formData.append("file", this.file);

      try {
        // 假设服务器端上传接口为 '/upload'
        const response = await axios.post('http://127.0.0.1:8000/api/upload', formData);
        console.log(response);
        if (response.status === 200) {
          alert("File uploaded successfully!");
          this.ast = response.data.ast;
        } else {
          alert(`Failed to upload file.Status: ${response.status}`);
        }
      } catch (error) {
        console.error("Error:", error);
        alert("An error occurred during file upload.");
      }
    },
    async handleData() {
      try {
        const response = await axios.get('http://127.0.0.1:8000/api/dataFlow', {
          params: {
            fileName: this.fileName
          }
        });
         if (response.status === 200) {
          alert("Dataflow analyze successfully!");
        } else {
          alert(`Failed to dataflow analyze: ${response.status}`);
        }
      } catch (error) {
        console.error("Error:", error);
        alert("An error occurred during dataflow analyze");
      }
    }
  }
};
</script>

<style scoped>
/* 在这里添加你的样式 */
h1 {
  text-align: center;
}

form {
  text-align: center;
}

button {
  margin-top: 10px;
}
</style>
  